<template>
  <div class="ProductEdit">
    <el-row class="border0">
      <el-col :span="4">
        <h1>新增产品</h1>
      </el-col>
      <el-col :span="8" :offset="12" align="right">
        <el-button type="success" class="saveBtn" @click="saveProduct">
          保 存
          <i class="el-icon-check el-icon--right"></i>
        </el-button>
        <el-button icon="el-icon-back" @click="btnClick('back')">返回列表</el-button>
      </el-col>
    </el-row>
    <el-form
      :model="productData"
      :rules="rules"
      ref="productData"
      label-width="140px"
      class="ruleForm_wrap"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="建站域名" prop="domain">
            <el-input v-model="productData.domain" class="w600" placeholder="不需要填写 http://"></el-input>
            <br />
            <span class="color_warning">示例： www.abcd.com (不可修改)</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="二级目录" prop="sec_dir">
            <el-input v-model="productData.sec_dir" class="w600" placeholder="留空默认首页作为落地页"></el-input>
            <span class="color_warning">示例： www.xxxx.com/sjhdsjkfh</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="选择地区" prop="area">
            <el-select v-model="productData.area" placeholder="*****选择地区*****" class="w600">
              <el-option
                v-for="(item,index) in areaArr"
                :key="index"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="语言选择" prop="language">
            <el-select v-model="productData.language" placeholder="*****选择语言*****" class="w600">
              <el-option
                :label="item.label"
                :value="item.label"
                v-for="(item,index) in languageArr"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="前台显示模板" prop="board_id" class="board_box">
            <img :src="board_img" alt width="100px" />
            <p>style-{{productData.board_id}}</p>
            <el-button type="primary" @click="isShowDrawer = true">选择模板(请选择地区+语言)</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="返回主页" prop="back_home">
            <el-checkbox label="开启单页返回主页入口(常关) " name="type" v-model="productData.back_home"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="产品名称" prop="pro_name_admin">
            <el-input v-model="productData.pro_name_admin" class="w600" placeholder="后台显示的产品名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品外文名称" prop="pro_name_user">
            <el-input v-model="productData.pro_name_user" class="w600" placeholder="客户看到的产品名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="产品自定名称">
            <el-input v-model="productData.pro_name_oper" class="w600" placeholder="审单人员看到的产品名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品采购URL">
            <el-input v-model="productData.pro_buy_url" class="w600" placeholder="添加可访问的采购链接，仅自己可见"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="产品售价" prop="pro_sale_price">
            <el-input v-model="productData.pro_sale_price" class="w600" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品原价">
            <el-input v-model="productData.pro_ori_price" class="w600" placeholder></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="产品分类">
            <el-select v-model="productData.pro_cate" class="w600" placeholder="请选择">
              <el-option
               v-for="item in productOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品标签">
            <el-input v-model="productData.pro_tags" class="w600" placeholder="产品标签"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <!-- <el-col :span="12">
          <el-form-item label="折扣">
            <el-input v-model="productData.pro_discount" class="w600" placeholder></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="优化师">
            <el-select v-model="productData.user" placeholder="请选择">
              <el-option
                      v-for="item in options"
                      :key="item.username"
                      :label="item.username"
                      :value="item.username">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付方式">
            <el-checkbox label="货到付款" name="type" v-model="productData.payment" disabled></el-checkbox>
            <!-- <el-checkbox label="PaySunny" name="type"></el-checkbox>
            <el-checkbox label="FHT" name="type"></el-checkbox>
            <el-checkbox label="加粉" name="type"></el-checkbox>
            <span class="color_warning">(勾选后将关闭下单入口，目前只适用于style64模板)</span>-->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="销量">
            <el-input v-model="productData.sale_num" class="w600" placeholder="产品的虚拟销量"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库存">
            <el-input v-model="productData.shop_num" class="w600" placeholder="产品的虚拟库存"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="禁选数量">
            <el-checkbox
              label="禁用(暂适用72模版,不了解用途的不要打勾) "
              name="type"
              v-model="productData.disable_num"
            ></el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="短信认证模板">
            <el-input
              v-model="productData.mess_reg"
              class="w600"
              placeholder="填写短信认证模板,验证码部分用#code#表示，不填写则不开启"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="联系邮箱">
            <el-input v-model="productData.email" class="w600" placeholder="便于客户联系的邮箱"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="CLOAK">
            <el-input
              v-model="productData.cloak"
              class="w600"
              placeholder="填写审核页URL开启CLOAK智能跳转,不带http://,在配置前请确认CLOAK参数配置无误"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="POP800 ID">
            <el-input
              v-model="productData.pop_id"
              class="w600"
              placeholder="到 www.pop800.com 申请客服账号，把工号填入此处即可对接POP的客服系统"
            ></el-input>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="购买提示">
            <el-input
              type="textarea"
              rows="4"
              placeholder="在用户选择产品套餐属性前给用户的一些提示和建议"
              v-model="productData.tips"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item class="w_block">
            <span slot="label">
              条款说明
              <p class="color_warning">填写将覆盖原有说明</p>
            </span>
            <Ueditor
              :articleContent="productData.statement"
              :ueditorConfig="ueditorConfig"
              ref="ueStatus"
              @ready="editorTkReady"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-row>
        <el-col :span="24">
          <el-form-item label="LINE">
            <el-input v-model="productData.pro_tags" class="w50" placeholder="用于微商模板的LINE号"></el-input>
            <el-input v-model="productData.pro_tags" class="w50 ml20" placeholder="用于微商模板的LINE链接"></el-input>
          </el-form-item>
          <el-form-item>
            <p>二维码</p>
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              drag
              multiple
              class="com_upload"
            >
              <p>点击选择或拖拽文件到这里</p>
            </el-upload>
            <el-dialog>
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="WECHAT">
            <el-input v-model="productData.pro_tags" class="w50" placeholder="用于微商模板的LINE号"></el-input>
          </el-form-item>
          <el-form-item>
            <p>二维码</p>
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              drag
              multiple
              class="com_upload"
            >
              <p>点击选择或拖拽文件到这里</p>
            </el-upload>
            <el-dialog>
              <img width="100%" :src="productData" alt />
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>-->

      <!--<el-row>-->
      <!--<el-col :span="24">-->
      <!--<el-form-item label="LOGO">-->
      <!--<el-upload-->
      <!--action="https://jsonplaceholder.typicode.com/posts/"-->
      <!--list-type="picture-card"-->
      <!--:on-preview="handlePictureCardPreview"-->
      <!--:on-remove="handleRemove"-->
      <!--drag-->
      <!--multiple-->
      <!--class="com_upload"-->
      <!--&gt;-->
      <!--<p>点击选择或拖拽文件到这里</p>-->
      <!--</el-upload>-->
      <!--<el-dialog>-->
      <!--<img width="100%" :src="productData" alt />-->
      <!--</el-dialog>-->
      <!--</el-form-item>-->
      <!--</el-col>-->
      <!--</el-row>-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="缩略图" prop="thumb">
            <el-upload
              action="/api/Product/imgUpload"
              list-type="picture-card"
              :auto-upload="true"
              :headers="myHeaders"
              :on-remove="thumbRemove"
              :file-list="thumbList"
              :on-success="successPic"
              :limit="1"
              drag
              multiple
              class="com_upload"
            >
              <p>点击选择或拖拽文件到这里</p>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="图集" prop="pic_arr">
            <el-upload
              action="/api/Product/imgUpload"
              list-type="picture-card"
              :auto-upload="true"
              :headers="myHeaders"
              :on-success="successPicture"
              :on-preview="handlePictureCardPreview"
              :on-remove="pic_arrRemove"
              :file-list="pic_arrList"
              :limit="100"
              drag
              multiple
              class="com_upload"
            >
              <p>点击选择或拖拽文件到这里</p>
            </el-upload>
            <el-dialog>
              <img width="100%" :src="productData" alt />
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="attr_wrap">
        <el-col>
          <el-form-item label="属性" class="attr_label">
            <el-col :span="3">属性组名称</el-col>
            <el-col :span="3">属性外文名称</el-col>
            <el-col :span="3">属性中文名称</el-col>
            <el-col :span="5">图片预览</el-col>
            <el-col :span="4">
              <el-button @click="addDomain">增加属性</el-button>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item v-for="(domain, index) in productData.attr" :key="index">
            <el-col :span="3">
              <el-input v-model="domain.name"></el-input>
            </el-col>
            <el-col :span="3">
              <el-input v-model="domain.e_name"></el-input>
            </el-col>
            <el-col :span="3">
              <el-input v-model="domain.c_name"></el-input>
            </el-col>
            <el-col :span="5">
              <el-upload
                action="/api/Product/imgUpload"
                :auto-upload="true"
                :headers="myHeaders"
                :show-file-list="false"
                class="attr_upload"
                :on-success="successPictureattr.bind(null, index, domain)"
                :on-remove="delPictureAttr.bind(null, index, domain)"
              >
                <img v-if="domain.img" :src="domain.img" class="avatar" />
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-col>
            <el-col :span="4">
              <el-button @click.prevent="removeDomain(domain)">删除</el-button>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="套餐" v-if="edit_id !== 'new'">
            <div class="tz_wrap" v-for="(item, index) in productData.meal" :key="index">
              <div class="tz_top_list">
                <el-col :span="2">套餐名称 :</el-col>
                <el-col :span="5">
                  <el-input v-model="item.name" class="tcInput" size="small"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-button size="small" type="danger" @click="removePackage(item)">删除</el-button>
                </el-col>
              </div>
              <div class="tz_top_list">
                <el-col :span="2" class="w">价格 ：</el-col>
                <el-col :span="5">
                  <el-input v-model="item.price" size="small"></el-input>
                </el-col>
              </div>
              <div class="tz_top_list">
                <el-col :span="2">套餐图片 ：</el-col>
                <el-col :span="9">
                  <el-upload
                    class="tz_upload upload_100"
                    list-type="picture"
                    action="/api/Product/imgUpload"
                    :auto-upload="true"
                    :headers="myHeaders"
                    :on-success="successPicturemeal"
                    :on-remove="handleRemove"
                    :limit="1"
                    :file-list="tz_fileList[index]"
                    :on-exceed="tzChange"
                  >
                    <el-button size="small" type="primary" @click="clickIndex(index)">点击上传</el-button>
                  </el-upload>
                </el-col>
              </div>
              <div>
                <div class="tz_table">
                  <el-col :span="5">产品名称</el-col>
                  <el-col :span="5">产品外文名称</el-col>
                  <el-col :span="5">产品数量</el-col>
                  <el-col :span="5">产品ERP ID</el-col>
                  <el-col :span="4">
                    <el-button size="small" type="primary" @click="addProduct(index)">增加产品</el-button>
                  </el-col>
                </div>
                <div class="tz_table" v-for="(proItem, i) in item.pro" :key="i">
                  <el-col :span="5">
                    <el-input v-model="proItem.pro_name_admin" size="small"></el-input>
                  </el-col>
                  <el-col :span="5">
                    <el-input v-model="proItem.pro_name_user" size="small"></el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-input v-model="proItem.num" size="small"></el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-input v-model="proItem.pro_id" :disabled="true" size="small"></el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-button size="small" type="success" @click="chooseProFn(index, i)">选择产品</el-button>
                    <el-button size="small" type="danger" @click="removeProduct(index,proItem)">删除</el-button>
                  </el-col>
                </div>
              </div>
            </div>
            <el-button size="small" type="primary" @click="addPackage">增加套餐</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label=" FB通用像素ID">
            <el-input v-model="productData.fb_id" class="w50"></el-input>
            <span class="color_warning">
              多个fb像素用
              <code>半角逗号(,)</code>分开
            </span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="Google 广告追踪">
            <el-input type="textarea" rows="4" v-model="productData.google_ad"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="Google Analytics">
            <el-input type="textarea" rows="4" v-model="productData.google_anal"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="Google Analytics ID">
            <el-input v-model="productData.google_anal_id" class="w50"></el-input>
            <span class="color_warning">示例：UA-123456789-1</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="附加代码">
            <el-input
              type="textarea"
              rows="4"
              placeholder="统计像素或者第三方CLOAK之类的JS代码"
              v-model="productData.third_code"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="产品详情">
            <Ueditor :articleContent="productData.pro_detail" @ready="editorReady" ref="UEDetail" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 选择商品弹框 -->
    <el-dialog title="选择商品" :visible.sync="isShowPro" center>
      <div class="dialog_body">
        <el-input
          placeholder="请输入域名"
          v-model="inputText"
          class="input-with-select"
          @keyup.enter.native="mealProListFn"
        >
          <el-select v-model="chooseSelect" slot="prepend" placeholder="请选择">
            <el-option label="erp id" value="id"></el-option>
            <el-option label="名称" value="name"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="mealProListFn"></el-button>
        </el-input>
        <el-table :data="mealProListData" border style="width: 100%">
          <el-table-column prop="id" label="产品 ID" width="80" align="center"></el-table-column>
          <el-table-column prop="thumb" label="缩略图" width="100" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.thumb" width="40" height="40" alt />
            </template>
          </el-table-column>
          <el-table-column prop="pro_name_admin" label="名称"></el-table-column>
          <el-table-column prop="area" label="地区" width="140"></el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button size="small" @click="confirmFn(scope.row.id,scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="pageChange"
        ></el-pagination>
      </span>
    </el-dialog>

    <el-drawer :visible.sync="isShowDrawer" direction="rtl" ref="drawer" size="80%">
      <el-row>
        <el-col :span="6" v-for="(item, index) in templateData" :key="index">
          <a href="javascript:;" @click="chooseTemplate(item.id)">
            <img :src="item.url" width="100%" alt />
            <p>{{item.name}}</p>
          </a>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>


<script>
import Ueditor from "@/components/Ueditor";
import Service from "../../services/main";
import { $local } from "../../assets/utils/utils";
import areaData from "../../assets/data/area.json";
export default {
  name: "ProductEdit",
  components: {
    Ueditor
  },
  data() {
    return {
      value: '',
      options: [],
      productOptions: [
        {
          value: '1',
           label: '衣服'
        },
         {
          value: '2',
           label: '包包'
        },
         {
          value: '3',
           label: '服饰'
        },
         {
          value: '4',
           label: '装饰'
        },
         {
          value: '5',
           label: '电子'
        },
         {
          value: '6',
           label: '家居'
        },
         {
          value: '7',
           label: '出行'
        },
         {
          value: '8',
           label: '旅游'
        },
         {
          value: '9',
           label: '美妆'
        },
         {
           value: '10',
           label: '工具'
        },
      ],
      ueditorConfig: {
        toolbars: [
          [
            "undo", //撤销
            "redo", //重做
            "bold", //加粗
            "indent", //首行缩进
            "italic", //斜体
            "underline", //下划线
            "subscript", //下标
            "fontborder", //字符边框
            "superscript", //上标
            "pasteplain", //纯文本粘贴模式
            "selectall", //全选
            "horizontal", //分隔线
            "removeformat", //清除格式
            "time", //时间
            "date", //日期
            "cleardoc", //清空文档
            "insertparagraphbeforetable", //"表格前插入行"
            "fontfamily", //字体
            "fontsize", //字号
            "paragraph", //段落格式
            "link", //超链接
            "unlink", //取消链接
            "spechars", //特殊字符
            "justifyleft", //居左对齐
            "justifyright", //居右对齐
            "justifycenter", //居中对齐
            "justifyjustify", //两端对齐
            "forecolor", //字体颜色
            "backcolor", //背景色
            "insertorderedlist", //有序列表
            "insertunorderedlist", //无序列表
            "fullscreen", //全屏
            "imageleft", //左浮动
            "imageright", //右浮动
            "imagecenter", //居中
            "lineheight", //行间距
            "edittip ", //编辑提示
            "customstyle" //自定义标题
          ]
        ],
        initialFrameHeight: 200,
        initialContent: ""
      },
      isShowDrawer: false,
      imgurl: "",
      mealIndex: "",
      thumbList: [],
      fileList3: [],
      pic_arrList: [],
      inputText: "",
      myHeaders: {
        cstoken: $local("userInfo").token
      },
      productData: {
        user: '',
        domain: "",
        sec_dir: "",
        area: "",
        back_home: Boolean,
        language: "",
        board_id: "6",
        payment: true,
        attr: [],
        pic_arr: [],
        meal: [
        //   {
        //     name: '',
        //     price : null,
        //     img: '',
        //     pro: [
        //       {
        //         pro_name_admin: "",
        //         pro_name_user: "",
        //         num: 1,
        //         pro_id: null,
        //         key: Date.now()
        //       }
        //     ]
        //   }
        ],
        products: [],
        statement: "",
        pro_detail: ""
      },
      mealProListData: [],
      rules: {
        domain: [{ required: true, message: "此字段必填！" }],
        sec_dir: [{ required: true, message: "此字段必填！" }],
        area: [{ required: true, message: "此字段必填！" }],
        language: [{ required: true, message: "此字段必填！" }],
        board_id: [{ required: true, message: "此字段必填！" }],
        pro_name_admin: [{ required: true, message: "此字段必填！" }],
        pro_name_user: [{ required: true, message: "此字段必填！" }],
        pro_sale_price: [{ required: true, message: "此字段必填！" }]
      },
      dialogImageUrl: "",
      dialogVisible: false,
      tz_fileList: [],
      content: "",
      edit_id: this.$route.params.id,
      areaArr: areaData.areaArr,
      languageArr: areaData.languageArr,
      isShowPro: false,
      chooseSelect: "id",
      total: null,
      pageNo: 1,
      proIndex: {},
      board_img: '',
      templateData: [
        {
          id: 6,
          url: require("../../assets/images/style6.jpg"),
          name: "style-6"
        },
        {
          id: 14,
          url: require("../../assets/images/style14.jpg"),
          name: "style-14"
        },
        // {
        //   id: 22,
        //   url: require("../../assets/images/style22.jpg"),
        //   name: "style-22"
        // },
        {
          id: 23,
          url: require("../../assets/images/style23.jpg"),
          name: "style-23"
        },
        // {
        //   id: 32,
        //   url: require("../../assets/images/style32.jpg"),
        //   name: "style-32"
        // },
        // {
        //   id: 73,
        //   url: require("../../assets/images/style73.jpg"),
        //   name: "style-73"
        // }
      ]
    };
  },
  created() {
    this.getPeople();
    this.getProductDataFn();
  },
  methods: {
    // 或得列表
    getPeople() {
      Service.proTeacher(this).then(res => {
        console.log(res);
        this.options = res.result;
      });
    },
    //   编辑数据回显
    getProductDataFn() {
      if (this.edit_id != "new") {
        Service.getproductData(this, { id: this.edit_id }).then(res => {
          this.productData = res.result.list[0];
          this.productData.back_home == "2"
            ? (this.productData.back_home = false)
            : (this.productData.back_home = true);
          this.content = this.productData.content;

          this.productData.attr == ""
            ? (this.productData.attr = [])
            : (this.productData.attr = JSON.parse(this.productData.attr));

            if(this.productData.attr){
                this.productData.attr.forEach(item => {
                    item.attrList = [{ url: item.img }];
                });
            }

          //   模板图片回显
          this.board_img = require("../../assets/images/style" +
            this.productData.board_id +
            ".jpg");

          this.productData.meal == ""
            ? (this.productData.meal = [])
            : (this.productData.meal = JSON.parse(this.productData.meal));

          // 套餐图片回显
          if(this.productData.meal){
            this.productData.meal.forEach((item, index) => {
                if (item.img) {
                this.tz_fileList[index] = [{ url: item.img }];
                }
            });
          }

          // 缩略图回显
          this.productData.thumb &&
            this.thumbList.push({
              url: this.productData.thumb
            });

          this.productData.pic_arr == ""
            ? (this.productData.pic_arr = [])
            : (this.productData.pic_arr = JSON.parse(this.productData.pic_arr));

            if(this.productData.pic_arr){
                for (let i = 0; i < this.productData.pic_arr.length; i++) {
                    this.pic_arrList.push({
                    url: this.productData.pic_arr[i]
                    });
                }
            }

          //   货到付款
          this.productData.payment == "货到付款"
            ? (this.productData.payment = true)
            : (this.productData.payment = false);
        });
      }
    },

    // 点击选择产品按钮
    chooseProFn(idx1, idx2) {
      this.isShowPro = true;
      this.proIndex.idx1 = idx1;
      this.proIndex.idx2 = idx2;

      this.mealProListFn();
    },

    // 获取套餐产品选择列表
    mealProListFn() {
      let params = {
        page: this.pageNo,
        id: this.chooseSelect == "id" ? this.inputText : "",
        pro_name_admin: this.chooseSelect == "name" ? this.inputText : ""
      };
      Service.mealProList(this, params).then(res => {
        if (res.errorMsg == "success") {
          this.total = res.result.total;
          this.mealProListData = res.result.list;
        }
      });
    },

    // 页面切换
    pageChange(val) {
      this.pageNo = val;
      this.mealProListFn();
    },

    // 判断是否有套餐，如果有则判断是否添加当前商品
    checkMeal(meal){
        if(meal != null){
            for (let i = 0; i < meal.length; i++) {
                let pro = meal[i].pro;
                let isTrue = false;
                for (let j = 0; j < pro.length; j++) {
                    let id = pro[j].pro_id;
                    if(id == this.edit_id) {
                        isTrue = true;
                    }
                }
                if(isTrue === false){
                    this.$message.error("套餐"+ (i + 1) +"未选择当前商品！");
                    return false;
                }
            }
        }
        return true;
    },

    // 编辑数据保存
    saveProduct() {
        let checkMeal = this.checkMeal(this.productData.meal);
        if(!checkMeal) return;

      this.productData.statement = this.$refs.ueStatus.getUEContent();
      this.productData.pro_detail = this.$refs.UEDetail.getUEContent();
      this.productData.payment = "货到付款";

      let params = JSON.parse(JSON.stringify(this.productData));
      params.back_home == true
        ? (params.back_home = "1")
        : (params.back_home = "2");

      if (params.domain == "") {
        this.$message.error("域名不能为空！");
      } else if (params.sec_dir == "") {
        this.$message.error("二级目录不能为空！");
      } else if (params.area == "") {
        this.$message.error("地区不能为空！");
      } else if (params.language == "") {
        this.$message.error("语言不能为空！");
      } else if (params.board_id == "") {
        this.$message.error("模板不能为空！");
      } else if (params.pro_name_admin == "") {
        this.$message.error("产品名称不能为空！");
      } else if (params.pro_name_user == "") {
        this.$message.error("产品外文名称不能为空！");
      } else if (params.pro_sale_price == "" || params.pro_sale_price == 0) {
        this.$message.error("产品售价不能为空！");
      } else if (params.pro_ori_price == "" || params.pro_ori_price == 0) {
        this.$message.error("产品价格有误！");
      } else {
        for (var key in params) {
          if (typeof params[key] != "string" && params[key]) {
            params[key].length == 0
              ? (params[key] = "")
              : (params[key] = JSON.stringify(params[key]));
          }
        }

        if (this.edit_id != "new") {
          Service.productEdit(this, params).then(res => {
            if (res.errorMsg == "success") {
              this.$message.success("产品保存成功！");
              this.$router.go(-1);
            }
          });
        } else {
          Service.productAdd(this, params).then(res => {
            if (res.errorMsg == "success") {
              this.$message.success("产品新增成功！");
              this.$router.go(-1);
            }
          });
        }
      }
    },

    // 图片删除接口
    imgDelFn(url) {
      Service.imgProDel(this, { img_url_path: url }).then(res => {
        if (res.errorMsg == "success") {
          this.$message.success("图片已删除！");
        }
      });
    },

    // 图片删除
    thumbRemove() {
      //file
      //   this.imgDelFn(file.url);
      this.productData.thumb = "";
    },

    pic_arrRemove(file) {
      this.productData.pic_arr.remove(file.url);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    // 添加域名
    addDomain() {
      this.productData.attr.push({
        name: "",
        e_name: "",
        c_name: "",
        img: ""
      });
    },

    // 添加套餐
    addPackage() {
      this.productData.meal.push({
        name: "",
        price: null,
        img: "",
        pro: [
          {
            pro_name_admin: "",
            pro_name_user: "",
            num: 1,
            pro_id: this.edit_id
          }
        ]
      });
    },

    // 增加产品
    addProduct(index) {
      this.productData.meal[index].pro.push({
        pro_name_admin: "",
        pro_name_user: "",
        num: null
      });
    },

    // 删除属性
    removeDomain(item) {
      var index = this.productData.attr.indexOf(item);
      if (index !== -1) {
        this.productData.attr.splice(index, 1);
      }
    },

    // 删除套餐
    removePackage(item) {
      var index = this.productData.meal.indexOf(item);
      if (index !== -1) {
        this.productData.meal.splice(index, 1);
      }
    },

    // 删除产品
    removeProduct(idx, item) {
      var index = this.productData.meal[idx].pro.indexOf(item);
      if (index !== -1) {
        this.productData.meal[idx].pro.splice(index, 1);
      }
    },

    // 套餐图片切换
    tzChange(file, fileList) {
      this.tz_fileList = fileList;
    },

    //
    handlePreview() {},

    // 返回列表
    btnClick() {
      this.$router.go(-1);
    },
    successPic(response, file, fileList) {
      this.thumbList = fileList;
      this.productData.thumb =
        fileList.length && fileList[0].response.result.path;
    },
    successPicture(response, file, fileList) {
      this.pic_arrList = fileList;
      let that = this;
      fileList.forEach(item => {
        if (item.hasOwnProperty("response")) {
          console.log(item, that.productData.pic_arr);
          that.productData.pic_arr.push(item.response.result.path);
        }
      });
    },

    // 套餐图片上传成功回调
    successPicturemeal(res) {
      //, file
      this.productData.meal.forEach((item, index) => {
        if (index === this.mealIndex) {
          item.img = res.result.path;
        }
      });
    },

    // 属性图片上传成功
    successPictureattr(idx, res, file) {
      this.productData.attr.forEach((item, index) => {
        if (index === idx) {
          item.img = file.result.path;
        }
      });
    },

        // 属性图片删除
    delPictureAttr(idx, res, file) {
        this.productData.attr[idx].img = "";
        this.imgDelFn(res.img);
    },

    // 点击上传获取index
    clickIndex(index) {
      this.mealIndex = index;
    },

    // 选择商品
    confirmFn(id) {
      this.confirmId = id;
      this.isShowPro = false;

      this.productData.meal[this.proIndex.idx1].pro[
        this.proIndex.idx2
      ].pro_id = id;
    },

    // 富文本编辑器回显
    editorReady(editor) {
      editor.setContent(this.productData.pro_detail);
    },

    // 详情富文本编辑器回显
    editorTkReady(editor) {
      editor.setContent(this.productData.statement);
    },

    // 选择模板
    chooseTemplate(id) {
      this.productData.board_id = id;
      this.board_img = require("../../assets/images/style" +
        this.productData.board_id +
        ".jpg");
      this.$refs.drawer.closeDrawer();
    }
  }
};
</script>

<style lang="scss">
.ProductEdit {
  .el-form-item__label {
    text-align: center;
  }
  .ruleForm_wrap {
    margin-top: 20px;
  }

  .w600 {
    width: 100%;
  }

  .w50 {
    width: 45%;
    display: inline-block;
  }

  .ml20 {
    margin-left: 10%;
  }

  .el-row {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }

  .w_block {
    width: 100%;
    display: block;
  }

  .board_box {
    img {
      display: block;
    }
  }

  .com_upload .el-upload-dragger {
    background: transparent;
    border: 0;
    font-size: 20px;
  }

  .com_upload .el-upload--picture-card,
  .com_upload .el-upload-dragger {
    width: 500px;
    height: 170px;
    line-height: 170px;
    float: left;
    margin-right: 30px;
  }

  .attr_wrap {
    .el-input {
      width: 150px;
      margin-left: 10px;
    }
    .attr_label {
      text-indent: 10px;
    }
  }

  .attr_upload {
    display: inline-block;
    margin: 0 10px;
    .el-upload-list {
      display: inline-block;
      float: left;
      vertical-align: middle;
      margin-top: -15px;
    }
    .el-upload {
      margin-left: 20px;
      vertical-align: middle;
    }
    .el-upload-list__item-name {
      display: none;
    }
  }
  .tz_wrap {
    background: #fbfdff;
    padding: 10px 10px;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    margin-bottom: 10px;
    .tz_top_list {
      overflow: hidden;
      margin-bottom: 5px;
    }
    .el-input {
      width: 90%;
    }
    .tz_table {
      overflow: hidden;
      margin-bottom: 5px;
    }
  }

  .tz_upload {
    .el-upload {
      display: inline-block;
    }
    .el-upload-list {
      display: inline-block;
    }
  }

  .saveBtn {
    position: fixed;
    right: 15px;
    top: 125px;
    z-index: 999;
  }

  .edui-editor div {
    line-height: normal;
  }
}

.tz_upload .el-upload {
  vertical-align: super;
}

.dialog_body .input-with-select {
  width: 400px;
  margin-bottom: 15px;
}

.el-dialog--center .el-dialog__body {
  padding: 15px 25px 10px;
}

.el-dialog__header {
  border-bottom: 1px solid #eee;
}

.el-input .el-select .el-input {
  width: 100px;
}
.el-pagination {
  text-align: center;
  margin-top: 0px;
}

.upload_100 .el-upload-list {
  width: 100px;
  vertical-align: middle;
  margin-left: 10px;
}

.el-drawer {
  .el-drawer__header {
    margin-bottom: 0;
  }
  .el-drawer__body {
    overflow: auto;
  }
  .el-row {
    width: 70%;
    .el-col {
      padding: 0 15px;
      margin-bottom: 15px;
      img {
        border: 1px solid #eee;
        max-width: 100%;
      }
      p {
        font-size: 16px;
        margin-top: 10px;
      }
    }
  }
}
  .avatar{
      width: 60px;
      height: 60px;
      margin-right: 10px;
  }
</style>
